<h1 data-bind="text: title"></h1>
<div class="row justify-content-center">
	<div class="col-sm-8">
		<h2>What are you looking for?</h2>
		<form data-bind="submit: searchSubmit" class="input-group mb-3">
			<input data-bind="value: searchInput" id="search-input" class="form-control" />
			<div class="input-group-btn ml-2">
				<button class="btn btn-primary" type="submit">Search</button>
			</div>
		</form>
		<p class="error" data-bind="text: errorStatus"></p>
		<div data-bind="foreach: searchResults" class="list-group">
			<a data-bind="click: $parent.navigateToDetails" href="#" class="list-group-item list-group-item-action flex-column align-items-start">
				<div class="row question-peek-wrapper">
					<h3>
						<span data-bind="text: $data.score" class="badge badge-secondary"></span>
						<span data-bind="text: $data.title" class="mb-1"></span>
					</h3>
					<small data-bind="text: $data.authorName"></small>
				</div>
				<p data-bind="text: $data.body" class="mb-1 search-result-body"></p>
			</a>
		</div>
		<pagination params="getItems: getSearches, eventName: 'searchesLoaded'"></pagination>
	</div>
	<div class="col-sm-4">
		<h2>Previous searches</h2>
		<div data-bind="foreach: searches" class="list-group">
			<a data-bind="click: $parent.search, params: {data: $data}" href="#" class="list-group-item list-group-item-action flex-column align-items-start">
				<div class="row">
                    <div class="col-sm-12 col-lg-6">
                        <h5 data-bind="text: $data.searchText" class="mb-1"></h5>
                    </div>
                    <div class="col-sm-12 col-lg-6 text-lg-right">
                        <small data-bind="text: $data.searchDate"></small>
                    </div>
				</div>
			</a>
		</div>
		<pagination params="getItems: getSearchHistory, eventName: 'searchHistoryLoaded'"></pagination>
	</div>
</div>